<template>
  <!-- 上架任务 -->
  <view class="content">
    <view class="line-view top-line-view">
      <view class="line-text">工厂</view>
      <view
        class="line-value"
        @click="factorySelectShow = true">
        {{ factoryName || '点击选择工厂' }}
      </view>
    </view>
    <u-select
      v-model="factorySelectShow"
      mode="single-column"
      :list="factorySelectList"
      @confirm="factorySelectConfirm"></u-select>

    <view class="line-view top-line-view">
      <view class="line-text">单据类型</view>
      <view
        class="line-value"
        style="width: 470rpx"
        @click="billTypeShow = true">
        {{ billTypeName || '点击选择单据类型' }}
      </view>
      <view
        class="clearn-view"
        @click="clearnBillType"
        v-if="billType">
        <uni-icons
          type="closeempty"
          color="#b0b0b0"
          size="15"></uni-icons>
      </view>
    </view>
    <u-select
      v-model="billTypeShow"
      mode="single-column"
      :list="billTypeList"
      @confirm="billTypeChange"></u-select>

    <view
      class="line-view top-line-view"
      style="padding: 15rpx 25rpx">
      <view class="line-text">批次</view>
      <view class="line-value">
        <uni-easyinput
          border
          v-model="barcode"
          :inputBorder="true"
          placeholder="请输入批次"
          @focus="barcode = ''"
          @confirm="searchList" />
      </view>
    </view>
    <view
      class="line-view top-line-view"
      style="padding: 15rpx 25rpx">
      <view class="line-text">物料代码</view>
      <view class="line-value">
        <uni-easyinput
          border
          v-model="productCode"
          :inputBorder="true"
          placeholder="请输入物料代码"
          @focus="productCode = ''"
          @confirm="searchList" />
      </view>
    </view>
    <view
      class="line-view top-line-view"
      style="padding: 15rpx 25rpx">
      <view class="line-text">备注</view>
      <view class="line-value">
        <uni-easyinput
          border
          v-model="remark"
          :inputBorder="true"
          placeholder="请输入备注"
          @focus="remark = ''"
          @confirm="searchList" />
      </view>
    </view>

    <!-- <blueTeethBtn></blueTeethBtn> -->

    <view v-if="dataList.length > 0">
      <view
        class="card-info"
        v-for="(item, index) of dataList"
        :key="index">
        <view class="card-line">
          <view class="num-title">任务号</view>
          <view class="num-content">{{ item.shelfTaskNo }}</view>
          <view
            class="num-button"
            @click="check(item.id)">
            领取任务
          </view>
        </view>
        <view
          class="card-line"
          style="flex-direction: column">
          <view class="line-view">
            <view class="line-text">仓库</view>
            <view class="line-value">
              {{ dataList[index].shelfTaskDetailDtos[0].stockName || '---' }}
            </view>
          </view>
          <view class="line-view">
            <view class="line-text">库区</view>
            <view class="line-value">
              {{
                dataList[index].shelfTaskDetailDtos[0].stockAreaName || '---'
              }}
            </view>
            <!-- <view
              class="line-print"
              @click="doPrint(item)">
              打印
            </view> -->
          </view>
          <view class="line-view">
            <view class="line-text">工厂</view>
            <view class="line-value">
              {{ dataList[index].shelfTaskDetailDtos[0].factoryName || '---' }}
            </view>
          </view>
          <view class="line-view">
            <view class="line-text">来源类型</view>
            <view class="line-value">
              {{ dataList[index].shelfTaskDetailDtos[0].billTypeName || '---' }}
            </view>
          </view>
          <view class="line-view">
            <view class="line-text">来源单号</view>
            <view class="line-value">
              {{ dataList[index].shelfTaskDetailDtos[0].billNo || '---' }}
            </view>
          </view>
          <view class="line-view">
            <view class="line-text">备注</view>
            <view class="line-value">
              {{ dataList[index].remark || '---' }}
            </view>
          </view>
        </view>
        <!-- <uni-table border stripe emptyText="暂无更多数据"> -->
        <!-- 表头行 -->
        <!-- <uni-tr>
						<uni-th align="left">物料名称</uni-th>
						<uni-th align="left">物料代码</uni-th>
						<uni-th align="left">来源类型</uni-th>
						<uni-th align="left">来源单号</uni-th>
						<uni-th align="left">物料种类</uni-th>
					</uni-tr> -->
        <!-- 表格数据行 -->
        <!-- <uni-tr v-for="(items, indexs) of item.shelfTaskDetailDtos" :key="indexs">
						<uni-td>{{ items.productName }}</uni-td>
						<uni-td>{{ items.productCode }}</uni-td>
						<uni-td>{{ items.billTypeName }}</uni-td>
						<uni-td>{{ items.billNo }}</uni-td>
						<uni-td>{{ items.materialQty }}</uni-td>
					</uni-tr>
				</uni-table> -->
      </view>
    </view>
    <view
      class="noData"
      v-else>
      暂无数据
    </view>

    <div class="pagination-view">
      <uni-pagination
        :current="page"
        :total="totalElements"
        :show-icon="false"
        @change="pageChange"
        :pageSize="pageSize"
        style="width: 720rpx" />
    </div>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
var that;
import * as bter from '@/components/printCom/bter.js';
import * as zksdk from '@/components/printCom/bluetoolth.js';
import blueTeethBtn from '@/components/blueTeethBtn/blueTeethBtn.vue';
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      totalElements: 0,
      productCode: null,
      barcode: null,
      scrollTop: 0,
      dataList: [],
      factoryId: null,
      billTypeList: [],
      factorySelectList: [], //选择工厂数组
      factorySelectShow: false,
      factoryId: null,
      factoryName: null, //工厂名称
      billTypeShow: false,
      billTypeName: null,
      billType: null,
      remark: null,
    };
  },
  onShow() {
    that.dataList = [];
    that.page = 1;
    uni.showLoading({
      mask: true,
      title: '请稍后...',
    });
    that.getInfo();
  },
  onLoad() {
    that = this;
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onNavigationBarButtonTap() {
    that.billType = null;
    that.billTypeName = null;
    that.barcode = null;
    that.productCode = null;
    that.remark = null;
    that.page = 1;
    that.getInfo();
  },
  computed: {},
  methods: {
    billTypeChange(e) {
      that.billTypeName = e[0].label;
      that.billType = e[0].value;
      that.page = 1;
      that.dataList = [];
      that.getList();
    },
    clearnBillType() {
      that.billTypeName = null;
      that.billType = null;
      that.page = 1;
      that.dataList = [];
      that.getList();
    },
    getOptions() {},
    pageChange(e) {
      console.log(e);
      uni.showLoading({
        mask: true,
        title: '加载中...',
      });
      that.page = e.current;
      that.getList();
    },
    searchList() {
      that.dataList = [];
      that.page = 1;
      that.getList();
    },
    getList() {
      uni.showLoading({
        mask: true,
        title: '请稍后...',
      });
      this.$u
        .get('/wms/mobile/api/queryShelfTaskByPage', {
          factoryId: that.factoryId,
          size: that.pageSize,
          page: that.page - 1,
          billType: that.billType,
          productCode: that.productCode,
          barcode: that.barcode,
          remark: that.remark,
        })
        .then((res) => {
          that.totalElements = res.data.totalElements;
          if (res.data.content && res.data.content.length > 0) {
            that.dataList = res.data.content;
          }
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 0,
          });
          uni.hideLoading();
        });
    },
    getInfo() {
      uni.showLoading({
        mask: true,
        title: '加载中...',
      });

      that.$u.post('/api/outsourceProject/getFactoryByUser', {}).then((res) => {
        that.factorySelectList = [];
        for (const item of res.data) {
          const loop = {
            value: item.id,
            label: item.name,
          };
          that.factorySelectList.push(loop);
        }
        that.factoryId = that.factorySelectList[0].value;
        that.factoryName = that.factorySelectList[0].label;
        that.getList();
      });

      this.$u
        .post('/api/enum/name', {
          enumName: 'BillTypeDisplayEnum',
        })
        .then((res) => {
          that.billTypeList = res.data;
        });
    },
    factorySelectConfirm(e) {
      that.page = 1;
      that.dataList = [];
      that.factoryId = e[0].value;
      that.factoryName = e[0].label;
      that.getList();
    },
    check(e) {
      uni.showLoading({
        mask: true,
        title: '请稍后...',
      });
      uni.navigateTo({
        url: '/pages/workEnter/shelf?id=' + e,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.card-info {
  background-color: #fff;
  padding: 35rpx 15rpx;
  margin-bottom: 35rpx;
}

.card-line {
  display: flex;
  align-items: center;
  font-size: 35rpx;
  margin-bottom: 10rpx;
}

.label-text {
  width: 250rpx;
}

.num-title {
  width: 160rpx;
  font-weight: 700;
  color: #555;
}

.num-content {
  width: 400rpx;
  font-weight: 700;
  color: #6a6a6a;
}

.num-button {
  width: 150rpx;
  margin-left: 10rpx;
  background-color: #217ef8;
  color: #fff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
  height: 55rpx;
}

.line-view {
  width: 100%;
  font-size: 30rpx;
  display: flex;
  align-items: flex-start;
  padding: 10rpx 15rpx;
  background-color: #fff;

  .line-text {
    width: 160rpx;
    font-weight: 700;
    color: #555;
  }

  .line-value {
    width: 540rpx;
    display: flex;
    color: #6a6a6a;
  }
}

.top-line-view {
  align-items: center;
  border-bottom: 1rpx solid #f8f8f8;
  padding: 25rpx;
}

.clearn-view {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1rpx solid #b0b0b0;
  margin-left: 20rpx;
}
</style>
